*{
    margin:0;
    padding:0;
    box-sizing: border-box;
 }

/* 头部 */
 .header{
    background-color: #0D7792;
    height: 33px;
    text-align: center;
    padding-top: 17px;
 }

/* 中间内容 */
 .atricle{
    background-color: #eef;
    height: 300px;
    padding-left: 150px;
    padding-right:100px; 
 }

/* 左边 */
 .atricle .left{
    width: 150px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -150px; 
    text-align: center;
    background: #430D6D;
 }

/* 右边 */
 .atricle .right{
    width: 100px;
    float: left;
    margin-left: -100px;
    position: relative;
    right: -100px; 
    text-align: center;
    background: #0D84BF;
 }

/* 中间 */
  .atricle .middle{
    width: 100%;
    float: left;
    text-align: center;
    background: #2222FF;
 }

/* 底部 */
 .footer{
    background-color: #0D7792;
    height: 33px;
    width: 100%;
    text-align: center;
    padding-top: 17px;
 }